<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
        <el-form-item>
          <el-button @click="handleQuery">保存</el-button>
          <el-button @click="Cancel">取消</el-button>
        </el-form-item>
    </el-form>
    <el-divider />
    <SetUserSelect
      :key="keys"
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="100"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @hospitalFun="hospitalFun"
    ></SetUserSelect>
  </div>
</template>
<script setup lang="ts" name="NewDepartment">
import { eitHdoctor, addDoctor, doctorlById  } from "@/api/basicManagement/doctorMana";
 import { watch, getCurrentInstance, ref } from "vue";
 import { departmentList as getList } from "@/api/basicManagement/departmentMana";
import { hospitalList, department  } from "@/api/basicManagement/hospital";
 import { useRoute, useRouter } from "vue-router";
import data from './data'
 const { bill, datas } = data
 datas.value = {
  status: '1'
 }
const route:any = useRoute();
const { proxy } = getCurrentInstance();
let proxys: any = proxy;
const { doctor_mana_job, doctor_mana_status, doctor_mana_position } = proxys.useDict("doctor_mana_job", "doctor_mana_status", "doctor_mana_position");

const keys = ref(0)
watch(
  doctor_mana_job,
  (newV, oldV) => {
    bill.value[4].selectData = doctor_mana_job
    keys.value = new Date().getTime();
  }
);
watch(
  doctor_mana_status,
  (newV, oldV) => {
    bill.value[6].selectData = doctor_mana_status
    keys.value = new Date().getTime();
  }
);
watch(
  doctor_mana_position,
  (newV, oldV) => {
    bill.value[5].selectData = doctor_mana_position
    keys.value = new Date().getTime();
  }
);

  const handleQuery = function():void {
    // setDate
    proxys.$refs.setUserSelect.submitForm().then((val) => {
      (!route.query.id? addDoctor : eitHdoctor)(val).then(() => {
        proxys.$modal.msgSuccess(`${route.query.id? '修改' : '新增'}成功`);
        Cancel()
      })
    })
  }
  const Cancel = () => {
    datas.value = {}
    const obj = { path: "/basicInformation/doctorList" };
    proxys.$tab.closeOpenPage(obj);
  }
  const changeFun = function(e:any):void {
    console.log(e)
  }

  route.query.id && doctorlById(route.query.id).then((res) => {
    res.data.status = ''+res.data.status
    datas.value = res.data
  })
  
const hospitalFun = (val) => {
  // datas.value.department = ''
  // bill.value[3].selectData = []
  // department({
  //   id: val.val
  // }).then((res:any) => {
  //   res.rows.forEach((item) => {
  //     bill.value[3].selectData.push({
  //       label: item.departmentName,
  //       value: '' + item.departmentId
  //     })
  //   })
  //   keys.value = new Date().getTime();
  // })
}
const getListFun = () => {
  Promise.all([getList({
    pageNum: 1,
    pageSize: 1,
  }), hospitalList({
    pageNum: 1,
    pageSize: 100000,
  })]).then((result:any) => {
    bill.value[3].selectData = []
    result[0].rows.forEach((item) => {
      // bill.value[3].selectData.push({
      //   label: item.name,
      //   value: '' + item.id
      // })
    })
    bill.value[2].selectData = []
    result[1].rows.forEach((item) => {
      bill.value[2].selectData.push({
        label: item.name,
        value: '' + item.id
      })
    })
    keys.value = new Date().getTime();
  })
}

getListFun()

</script>
<style scoped>
.pad_10 {
  padding: 10px;
}
.pad_10  .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>